<!-- 下载配货单 -->
<template>
  <!-- 添加或修改盘点计划对话框 -->
  <el-dialog :title="title" v-if="open" v-model="open" width="600px" append-to-body>
    <div class="container">
      <div class="btn_main">
        <el-upload
          class="avatar-uploader el-upload"
          :headers="headers"
          accept=".xlsx,.xls"
          :on-success="(res, file) => handleUploadSuccess(res, file)"
          :show-file-list="false"
          :on-error="handleError"
          :action="uploadUrl"
        >
          <el-button class="btn" type="primary"
            ><el-icon><UploadFilled /></el-icon>导入客户</el-button
          >
        </el-upload>
        <el-button class="btn" type="primary" size="default" @click="downloadExcelTemplate"
          ><el-icon><Download /></el-icon>下载模板</el-button
        >
      </div>
      <div class="des_main">
        <div class="des_item">导入数据参照模板</div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import modelMixin from '@/mixins/modelMixin';
import { globalHeaders } from '@/utils/request';
export default {
  name: 'downloadAllocation',
  mixins: [modelMixin],
  data() {
    return {
      open: false,
      title: '导入客户',

      headers: globalHeaders(),
      uploadUrl: import.meta.env.VITE_APP_BASE_API + '/order/supplier/importExcel' // 上传的图片服务器地址
    };
  },
  created() {},
  methods: {
    show() {
      this.open = true;
    },

    handleUploadSuccess(res, file) {
      if (res.code === 200) {
        this.$modal.msgSuccess('导入成功');
        this.open = false;
        this.$emit('ok');
      } else {
        this.$modal.msgError(res.msg);
      }
    },
    handleError(res, file) {
      console.log(7777);
      this.$modal.error('导入失败');
    },
    downloadExcelTemplate() {
      window.open('/customer_template.xlsx');
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  padding: 30px;

  .btn_main {
    display: flex;
    justify-content: space-around;

    .btn {
      width: 200px;
      height: 40px;
      font-size: 16px;
    }
  }

  .des_main {
    margin-top: 20px;

    .des_item {
      margin-bottom: 10px;
      text-align: center;
      color: #999999;
    }
  }
}
</style>